<!-- eslint-disable vue/valid-v-for -->
<template>
  <div>
    <div class="day">
      <!-- 导航栏 -->
      <van-nav-bar title="总运动" left-text="返回" left-arrow @click-left="onClickLeft" />
      <!-- 日期 -->
      <van-tabs>
        <van-tab v-for="index in 30" :title="index + '日'"> 内容 {{ index }} </van-tab>
      </van-tabs>
    </div>

    <!-- 浮动面板 -->
    <van-floating-panel v-model:height="height" :anchors="anchors">
      <div style="text-align: center; padding: 15px">
        <div class="sports">
          <van-swipe :loop="false" :width="220" :show-indicators="false">
            <van-swipe-item>
              <RouterLink to="/RunningView">
                <div class="run">
                  <div class="runradios">
                    <p>999</p>
                    <span style="color: rgb(165, 174, 185)">cal</span>
                  </div>
                  <p>跑步</p>
                </div>
              </RouterLink>
            </van-swipe-item>
            <van-swipe-item
              ><div class="swiming">
                <div class="runradios">
                  <p>888</p>
                  <span style="color: rgb(165, 174, 185)">cal</span>
                </div>
                <p>游泳</p>
              </div>
            </van-swipe-item>
            <van-swipe-item>
              <div class="Ride">
                <div class="runradios">
                  <p>666</p>
                  <span style="color: rgb(165, 174, 185)">cal</span>
                </div>
                <p>骑行</p>
              </div>
            </van-swipe-item>
          </van-swipe>
        </div>
      </div>
    </van-floating-panel>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const onClickLeft = () => history.back()

const anchors = [100, Math.round(0.4 * window.innerHeight)]
const height = ref(anchors[0])
</script>

<style lang="css">
.run {
  width: 40vw;
  height: 55vw;
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
  flex-wrap: wrap;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  border-radius: 8vw;
  position: relative;
  background-color: rgb(108, 93, 211);
}
.van-swipe-item {
  margin-right: 15vw;
}
.runradios {
  width: 25vw;
  height: 25vw;
  background-color: white;
  border-radius: 50vw;
  position: absolute;
  top: 5vw;
}
.runradios > p {
  position: absolute;
  left: 8vw;
  top: 3vw;
}
.runradios > span {
  position: absolute;
  left: 10vw;
  top: 10vw;
}
.run > p {
  color: aliceblue;
  position: absolute;
  bottom: 8vw;
  font-size: 5vw;
}

.swiming {
  width: 40vw;
  height: 55vw;
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
  flex-wrap: wrap;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  border-radius: 8vw;
  position: relative;
  background-color: rgb(93, 216, 208);
}
.van-swipe-item {
  margin-right: 0vw;
}
.runradios {
  width: 25vw;
  height: 25vw;
  background-color: white;
  border-radius: 50vw;
  position: absolute;
  top: 5vw;
}
.runradios > p {
  position: absolute;
  left: 8vw;
  top: 3vw;
}
.runradios > span {
  position: absolute;
  left: 10vw;
  top: 10vw;
}
.swiming > p {
  color: aliceblue;
  position: absolute;
  bottom: 8vw;
  font-size: 5vw;
}

.Ride {
  width: 40vw;
  height: 55vw;
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
  flex-wrap: wrap;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  border-radius: 8vw;
  position: relative;
  background-color: rgb(255, 155, 145);
}
.van-swipe-item {
  margin-right: 0vw;
}
.runradios {
  width: 25vw;
  height: 25vw;
  background-color: white;
  border-radius: 50vw;
  position: absolute;
  top: 5vw;
}
.runradios > p {
  position: absolute;
  left: 8vw;
  top: 3vw;
}
.runradios > span {
  position: absolute;
  left: 10vw;
  top: 10vw;
}
.Ride > p {
  color: aliceblue;
  position: absolute;
  bottom: 8vw;
  font-size: 5vw;
}

.van-swipe {
  top: 8vw;
}
.day {
  height: 200vw;
  background-color: rgb(1, 4, 13);
  color: aliceblue;
}
.van-tabs__nav--line.van-tabs__nav--complete {
  background-color: black;
}
.van-tab {
  color: aliceblue;
  font-size: 4vw;
}
.van-tab--active {
  font-size: 6vw;
  color: aliceblue;
}
</style>
